<template>
	<view>
		<view class="top">
			<view class="" style="width: 70%;margin: 20rpx auto;">

				<!-- 	<u-search  placeholder="请输入菲码编号/款式编号/款式名称" :showAction="true"  v-model="query" actionText="搜索" :animation="true" @custom="sr"></u-search> -->
				<u-search :input-style="inputStyle" shape="square" placeholder="请输入款式编号/款式名称" v-model="query" :showAction="false"></u-search>

			</view>

			<view class="" @click="addclothes">
				<image style="width: 100rpx;height: 100rpx;" src="../../static/plus.png" mode=""></image>
			</view>
		</view>
		<!-- 衣服列表 -->
		<view class="">

			<view class="item" v-for="(item, index) in data" :key="index">
				<view class="content">

					<u-swiper :list="item.src" indicator indicatorMode="line" circular></u-swiper>
					<view class="son">
						款式编号:{{item.clothesEncode}}
					</view>

					<view class="detail">

						<view class="info">
							款式名称:{{item.clothesName}}
						</view>

						<!-- <view class="info">
							数量:{{item.clothesNum}}
						</view> -->
					</view>

					<view class="detail">

						<view class="bottom-buttons">
							<!-- 														<view class="button-tag">
																删除
															</view>
															<view class="button-tag">
																修改
															</view> -->
							<view @click="create(item.id,item.clothesName)" class="button-tag">
								创建订单
							</view>
							<view @click="fm(item.id,item.clothesEncode,item.clothesName)" class="button-tag">
								查看菲码
							</view>
							<view @click="detail(item.id,item.clothesEncode,item.clothesName)" class="button-tag" style="background-color: #0abafa; color: white;">
								详情
							</view>
						</view>


					</view>

				</view>
			</view>
		</view>

		<view class="wrap">
			<u-loadmore @loadmore="more()" :status="status" />
		</view>

		<u-empty v-if="isdata" mode="search" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: "",
				status: 'loadmore',
				page: 0,
				total: 0,
				inputStyle: {
					fontSize: '12px', //修改搜索框里面的文字大小
					width: "500rpx"
				},
				isdata: true,
				data: [],

			}
		},
		onLoad() {
			// this.api.post("/clothes/selectClothes", {
			// 	companyId: that.$store.state.myCompanyId,
			// 	query: that.query,
			// 	count: 15,
			// 	index: that.page
			// }).then(res => {
			// 	console.log(res);
			// 	if (res.code == 200) {
			// 		this.data = res.data
			// 		if (res.data.length != 0) {
			// 			this.isdata = false
			// 		}
			// 	}
			// })
		},
		methods: {
			more() {
				var that=this
				console.log("点击了加载更多")
				if ((this.page + 1) * 15 >= this.total) {
					this.status = 'nomore'
					return;
				} else {

					this.status = 'loading';
					this.page = ++this.page;
					this.api.post("/clothes/selectClothes", {
						id: that.$store.state.myCompanyId,
						query: that.query,
						count: 15,
						index: that.page
					}).then(res => {
						console.log(res.data)
						that.total = res.pageCount
						that.loadmore(res.data)
						console.log(res);
						if ((this.page + 1) * 15 >= this.total) this.status = 'nomore';
						else this.status = 'loadmore';
					})
				}
			},
			loadmore(data) {
				for (let i = 0; i < data.length; i++) {
					this.data.push(data[i])
				}
			},
			addclothes() {
				uni.navigateTo({
					url: "/pages/newclothes/newclothes"
				})
			},
			create(id, name) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/neworder/neworder?id=" + id + "&name=" + name
				})
			},
			detail(id, clothesEncode, clothesName) {
				uni.navigateTo({
					url: "/pages/clothesdetail/clothesdetail?id=" + id + "&clothesEncode=" + clothesEncode + "&clothesName=" +
						clothesName
				})
			},
			bf(id, clothesEncode, clothesName) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/generate/generate?id=" + id + "&clothesEncode=" + clothesEncode + "&clothesName=" + clothesName
				})
			},
			fm(id, clothesEncode, clothesName) {
				uni.navigateTo({
					url: "/pages/clothesuncode/clothesuncode?id=" + id + "&clothesEncode=" + clothesEncode + "&clothesName=" +
						clothesName
				})
			}
		},
		watch: {
			query(newValue, oldValue) {
				this.status = 'loadmore',
				this.data = []
				this.page = 0
				var that = this
				this.api.post("/clothes/selectClothes", {
					id: that.$store.state.myCompanyId,
					query: that.query,
					count: 15,
					index: that.page
				}).then(res => {
					console.log(res.data)
					that.total = res.pageCount
					that.loadmore(res.data)
					console.log(res);
				})
			},
		},
		onShow() {
			var that=this
			this.api.post("/clothes/selectClothes", {
				id:that.$store.state.myCompanyId,
				query: that.query,
				count: 15,
				index: that.page
			}).then(res => {
				    that.total=res.pageCount
					that.data = res.data
					if (res.data.length != 0) {
						that.isdata = false
					}
				}

			)
		}
	}

</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}

	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: right;
		align-items: center;

	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #A5A5A5;
		border: 1px solid #EDEDED;
	}

	.detail {
		display: flex;
	}

	.top {
		height: 50px;
		background-color: #e2e4ee;
		display: flex;

	}

	.content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.son {
		margin: 20rpx;
	}

	.info {
		margin: 20rpx;
	}

	.item {}

	.bt {
		width: 90%;
		margin: 20rpx auto;
	}
</style>
